<template>
    <el-container>
        <el-header height="36px" style="background-color: #EFEFEF;padding:6px 0px 0px 5px;">
            <div style="float:left">
                <el-button type="primary" size="small" style="display:inline" @click="ok">确定
                </el-button>
                <el-button size="small" type="danger" @click="closeDialog">关闭</el-button>
            </div>
            <div style="float:right;margin-right: 5px;">
                <el-checkbox v-model="data.isExportSturcture" label="导出表结构" style="margin-right:10px" size="small" />
                <el-checkbox v-model="data.isExportData" label="导出表数据" size="small" />
            </div>
        </el-header>
        <el-main style="overflow-x:hidden">
            <el-checkbox-group v-model="checkboxGroup1" size="large">
                <el-checkbox v-for="item in data.tables" :key="item" :label="item" class="cb-tables" />
            </el-checkbox-group>
        </el-main>
    </el-container>
</template>
<script lang="ts" setup>
// @ts-nocheck
import { reactive, ref } from 'vue';
import { invoke } from '@tauri-apps/api/tauri';
import { ElMessage } from 'element-plus';

const emits = defineEmits(["closeDialog"]);

const checkboxGroup1 = ref([])

const data = reactive({
    dataId: null,
    database: null,
    schema: null,
    tables: [],
    isExportSturcture: false,
    isExportData: true,
});

const ok = () => {
    if (checkboxGroup1.value.length == 0) {
        ElMessage({
            message: "请至少选择一张表！",
            type: "warning",
        });
        return;
    }
    invoke("pgsql_export_db_tables", { id: data.dataId, database: data.database, schema: data.schema, isSturcture: data.isExportSturcture, isData: data.isExportData, tables: checkboxGroup1.value }).then((_: any) => {
        ElMessage({
            message: "导出成功！",
            type: "success",
        });
    }).catch(err => {
        ElMessage({
            message: "导出失败！",
            type: "error",
        });
        console.error(err);
    });
}


const closeDialog = () => {
    // console.log(container.value.$parent.value);
    // container.value.$parent.closeDialog();
    emits("closeDialog");
}

const loadTables = (dataId: string, database: string, schema: string) => {
    invoke("pgsql_get_tables", { id: dataId, database: database, schema: schema }).then((result: any) => {
        data.tables.splice(0, data.tables.length);
        data.dataId = dataId;
        data.database = database,
            data.schema = schema;
        for (let i = 0; i < result.length; i++) {
            data.tables.push(result[i].name);
        }
    }).catch(err => {
        console.error(err);
    });
}

defineExpose({ loadTables });
</script>